<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>下拉菜单</title>
<link href="assets/css/doncare.css" type="text/css" rel="stylesheet" />
<link href="assets/css/doncare.frame.css" type="text/css" rel="stylesheet" />
<link href="assets/font/icon200.css" type="text/css" rel="stylesheet">
<!--[if lt IE 8]>
<link href="assets/font/icon200ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/doncare.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.page.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.frame.js" type="text/javascript" defer></script>


<!-- load plugin: dropdown -->
<link href="assets/plugin/dropdown/jquery.dropdown.css" type="text/css" rel="stylesheet" />
<script src="assets/plugin/dropdown/jquery.dropdown.min.js" type="text/javascript" defer></script>


</head>
<body>
<div id="header" class="header">
    <div class="header-left">
        
    </div>
    <div class="header-option">
        <a href="javascript:;" onclick="DC.page.open('alert.html');" ><i class="icon-sign-left"></i>警告框</a>
        <a href="javascript:;" onclick="DC.page.open('select.html');" ><i class="icon-sign-right"></i>Select美化</a>
    </div>
</div>
<div id="main" class="main">
    <div class="block transparent">
        <div class="block-main">
            <h3>下拉菜单 <small>jquery.dropdown.js</small></h3>
            <hr />
            <p><a href="http://labs.abeautifulsite.net/jquery-dropdown/" target="_blank">来源于这 http://labs.abeautifulsite.net/jquery-dropdown/</a></p>
            
            <a href="javascript:;" data-dropdown="#dropdown-1" class="btn"><span><i class="icon-caret-down"></i>点我看菜单</span></a>
            <div class="gap10"></div>
            
            <div class="code-block">
                <pre>
&lt;a href="javascript:;" data-dropdown="#dropdown-1" class="btn"&gt;&lt;span&gt;&lt;i class="icon-caret-down"&gt;&lt;/i&gt;点我看菜单&lt;/span&gt;&lt;/a&gt;

&lt;div id="dropdown-1" class="dropdown dropdown-tip"&gt;
	&lt;ul class="dropdown-menu"&gt;
		&lt;li&gt;&lt;a href="#1"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#2"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#3"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
		&lt;li class="dropdown-divider"&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#4"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#5"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#5"&gt;Item 6&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</pre>
            </div>
        </div>
    </div>
    
    <div class="block">
        <div class="block-main">
            <h3>注意！在 block 和 panel 中使用</h3>
            <hr />
            <p>由于<code>block</code>和<code>panel</code>使用了相对定位，你必须将子菜单的内容放在这两个容器的外面，避免子菜单定位出现问题，推荐将子菜单放到页面末端</p>
        </div>
    </div>
    
    <div class="block transparent">
        <div class="block-main">
            <h3>具体用法这个版本不详细展开了，访问原作者的demo站吧</h3>
            <hr />
            <h4><a href="http://labs.abeautifulsite.net/jquery-dropdown/" target="_blank" class="link"><i class="icon-global"></i> http://labs.abeautifulsite.net/jquery-dropdown/</a></h4>
        </div>
    </div>
            
	<div id="dropdown-1" class="dropdown dropdown-tip">
		<ul class="dropdown-menu">
			<li><a href="#1">Item 1</a></li>
			<li><a href="#2">Item 2</a></li>
			<li><a href="#3">Item 3</a></li>
			<li class="dropdown-divider"></li>
			<li><a href="#4">Item 4</a></li>
			<li><a href="#5">Item 5</a></li>
			<li><a href="#5">Item 6</a></li>
		</ul>
	</div>
</div>
</body>
</html>
